<template>
  <el-main>
    <el-space>
      <el-button @click="handleScroll('box1')">box1</el-button>
      <el-button @click="handleScroll('box2')">box2</el-button>
      <el-button @click="handleScroll('box3')">box3</el-button>
    </el-space>
    <el-scrollbar height="600px">
      <div class="box" id="box1">box1</div>
      <div class="box" id="box2">box2</div>
      <div class="box" id="box3">box3</div>
    </el-scrollbar>
  </el-main>
</template>

<script setup lang="ts">
const handleScroll = (cmd: string) => {
  let el = document.getElementById(cmd)
  console.log(el);
  el?.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
}
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  aspect-ratio: 5 / 4;
  border: 1px solid skyblue;
  margin-bottom: 20px;
}
</style>